.fire-property {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  .item-wrap{
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 62px;
    background-size: cover;
    margin-bottom: 20px;
  }
  // 气象站图标
  .weather-station-icon {
    margin-right: 5px;
    &:hover {
      transform: scale(1.1);
      filter: brightness(1.2);
    }

    &:active {
      transform: scale(1.05);
    }
  }

  // 标题文字
  .weather-station-title {
    font-size: 20px;
    &:hover {
      filter: brightness(1.2);
      transform: scale(1.02);
    }

    &:active {
      transform: scale(1);
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-1px);

    .weather-station-icon {
      filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    }

    .weather-station-title {
      filter: brightness(1.3);
      text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .weather-station-title {
      color: rgba(0, 0, 0, 0.9) !important;
      text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.8) !important;
    }

    .weather-station-icon {
      filter: brightness(0.8) contrast(1.2) !important;
    }

    &:hover {
      .weather-station-title {
        color: rgba(0, 0, 0, 1) !important;
        text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3) !important;
      }

      .weather-station-icon {
        filter: brightness(1) contrast(1.3) drop-shadow(0 0 6px rgba(0, 0, 0, 0.2)) !important;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .weather-station-icon {
      width: 28px !important;
      height: 28px !important;
    }

    .weather-station-title {
      width: 95px;
      height: 26px;
      font-size: 18px !important;
      line-height: 26px !important;
    }
  }

  @media (max-width: 480px) {
    .weather-station-icon {
      width: 24px !important;
      height: 24px !important;
    }

    .weather-station-title {
      width: 85px;
      height: 22px;
      font-size: 16px !important;
      line-height: 22px !important;
      letter-spacing: 1px !important;
    }
  }

  // 焦点可访问性
  &:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }

  .weather-station-icon:focus,
  .weather-station-title:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .weather-station-title {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
      font-weight: bold !important;
    }

    .weather-station-icon {
      filter: contrast(1.5) brightness(1.2) !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }

    &:hover {
      transform: none !important;
    }

    .weather-station-icon:hover,
    .weather-station-title:hover {
      transform: none !important;
    }
  }

  // 数据状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .weather-station-icon {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 4px;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #FFFFFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  &.warning {
    .weather-station-title {
      color: #FFC107 !important;
      text-shadow: 0px 0px 6px #FF8F00 !important;
    }

    .weather-station-icon {
      filter: hue-rotate(35deg) brightness(1.2) !important;
    }
  }

  &.danger {
    .weather-station-title {
      color: #F44336 !important;
      animation: dangerPulse 1s ease-in-out infinite;
      text-shadow: 0px 0px 8px #D32F2F !important;
    }

    .weather-station-icon {
      filter: hue-rotate(320deg) brightness(1.3) !important;
      animation: iconDanger 1s ease-in-out infinite;
    }
  }

  &.success {
    .weather-station-title {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 6px #2E7D32 !important;
    }

    .weather-station-icon {
      filter: hue-rotate(100deg) brightness(1.2) !important;
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    * {
      filter: grayscale(1);
    }
  }

  // 动画关键帧
  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes dangerPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.05);
      filter: brightness(1.3);
    }
  }

  @keyframes iconDanger {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  // 特殊效果
  &.enhanced {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      border-radius: 8px;
      z-index: -1;
      animation: borderFlow 3s linear infinite;
    }

    .weather-station-title {
      animation: titleGlow 2s ease-in-out infinite;
    }

    .weather-station-icon {
      animation: iconGlow 2s ease-in-out infinite;
    }
  }

  @keyframes borderFlow {
    0% {
      transform: rotate(0deg);
      opacity: 0.3;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.3;
    }
  }

  @keyframes titleGlow {
    0%, 100% {
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
      text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.8), 0px 0px 20px rgba(255, 255, 255, 0.4);
    }
  }

  @keyframes iconGlow {
    0%, 100% {
      filter: brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }
    50% {
      filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
  }

  // 错误状态
  &.error {
    &::after {
      content: '离线';
      position: absolute;
      top: -8px;
      right: -8px;
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      z-index: 15;
    }

    .weather-station-title {
      color: #F44336 !important;
      text-decoration: line-through;
    }

    .weather-station-icon {
      filter: grayscale(1) brightness(0.5) !important;
    }
  }

  // 更新状态
  &.updating {
    .weather-station-title {
      animation: updateAnimation 0.8s ease-in-out;
    }

    .weather-station-icon {
      animation: iconUpdate 1s ease-in-out;
    }
  }

  @keyframes updateAnimation {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.7;
      filter: brightness(1.3);
    }
  }

  @keyframes iconUpdate {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    50% {
      transform: scale(1.1) rotate(180deg);
      opacity: 0.8;
      filter: brightness(1.2);
    }
  }

  // 气象站状态
  &.online {
    .weather-station-title {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 6px #2E7D32 !important;
    }

    .weather-station-icon {
      filter: hue-rotate(100deg) brightness(1.2) !important;
    }

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background: #4CAF50;
      border-radius: 50%;
      box-shadow: 0 0 6px #4CAF50;
      z-index: 10;
      animation: onlinePulse 2s ease-in-out infinite;
    }
  }

  &.offline {
    .weather-station-title {
      color: #9E9E9E !important;
      text-shadow: none !important;
    }

    .weather-station-icon {
      filter: grayscale(1) brightness(0.7) !important;
    }

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background: #F44336;
      border-radius: 50%;
      z-index: 10;
    }
  }

  &.maintenance {
    .weather-station-title {
      color: #FF9800 !important;
      text-shadow: 0px 0px 6px #F57C00 !important;
    }

    .weather-station-icon {
      filter: hue-rotate(35deg) brightness(1.1) !important;
      animation: maintenanceBlink 1.5s ease-in-out infinite;
    }

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background: #FF9800;
      border-radius: 50%;
      animation: maintenancePulse 1s ease-in-out infinite;
      z-index: 10;
    }
  }

  @keyframes onlinePulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.2);
    }
  }

  @keyframes maintenanceBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
      filter: hue-rotate(35deg) brightness(1.3) !important;
    }
  }

  @keyframes maintenancePulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.3);
    }
  }

  // 监控状态
  &.monitoring {
    .weather-station-title {
      animation: monitoringText 3s ease-in-out infinite;
    }

    .weather-station-icon {
      animation: monitoringIcon 2s ease-in-out infinite;
    }
  }

  @keyframes monitoringText {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.2) hue-rotate(10deg);
    }
  }

  @keyframes monitoringIcon {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.3) saturate(1.2);
    }
  }

  // 告警状态
  &.alert {
    .weather-station-title {
      color: #F44336 !important;
      animation: alertText 0.8s ease-in-out infinite;
      text-shadow: 0px 0px 10px #F44336 !important;
    }

    .weather-station-icon {
      filter: hue-rotate(320deg) brightness(1.4) !important;
      animation: alertIcon 0.6s ease-in-out infinite;
    }

    &::after {
      content: '⚠';
      position: absolute;
      top: -6px;
      right: -6px;
      color: #F44336;
      font-size: 16px;
      font-weight: bold;
      animation: alertSymbol 1s ease-in-out infinite;
      z-index: 15;
      text-shadow: 0px 0px 8px #F44336;
    }
  }

  @keyframes alertText {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.08);
      opacity: 0.8;
    }
  }

  @keyframes alertIcon {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }

  @keyframes alertSymbol {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    50% {
      transform: scale(1.2) rotate(5deg);
      opacity: 0.7;
    }
  }

  // 数据采集状态
  &.collecting {
    .weather-station-icon {
      animation: collectingRotate 3s linear infinite;
    }

    .weather-station-title {
      animation: collectingPulse 2s ease-in-out infinite;
    }

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 6px;
      height: 6px;
      background: #2196F3;
      border-radius: 50%;
      animation: collectingBlink 1s ease-in-out infinite;
      z-index: 10;
    }
  }

  @keyframes collectingRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes collectingPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
      filter: brightness(1.2);
    }
  }

  @keyframes collectingBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }
}
